<template>
	<view class="integralConfirm">
		<!-- tab 选择栏 -->
		<view class="tab_box flex-r-b-s">
			<view @click="tabCurrent = 0" :class="[tabCurrent == 0?'tab_item active1':'tab_item active3','flex-c-c-c']">
				<text>门店自提</text>
			</view>
			<view @click="tabCurrent = 1" :class="[tabCurrent == 1?'tab_item active2':'tab_item active','flex-c-c-c']">
				<text>邮寄到家</text>
			</view>
			<view
				style="position:absolute;bottom: 0;left: 30px;width: 280px;background-color:#FFFFFF;z-index: 88;height:20px;">
			</view>
		</view>
		<!-- 自提地址信息 -->
		<view class="address_box" v-if="tabCurrent == 0">
			<view class="address one-line-ellipsis">{{integralDetails.selfmention.address}}</view>
			<view class="address_b flex-r-s-c">
				<view class="name">{{integralDetails.selfmention.name}}</view>
				<view class="tel">{{integralDetails.selfmention.mobile}}</view>
			</view>
		</view>
		<!-- 邮寄地址信息 -->
		<view class="address_box" v-if="tabCurrent == 1" @tap.stop="goAddressList">
			<view class="address one-line-ellipsis">{{integralDetails.sendbypost.address}}</view>
			<view class="address_b flex-r-s-c">
				<view class="name">{{integralDetails.sendbypost.name}}</view>
				<view class="tel">{{integralDetails.sendbypost.mobile}}</view>
			</view>
		</view>
		<!-- 产品信息 -->
		<view class="productInfo">
			<view class="title">兑换详情：</view>
			<view class="list flex-r-a-c">
				<image :src="integralDetails.image" mode=""></image>
				<view class="list_f">
					<view class="name">{{integralDetails.name}}</view>
					<view class="integral">{{integralDetails.points}}<text>积分</text></view>
				</view>
			</view>
		</view>
		<!-- 积分详细 -->
<!-- 		<view class="integral_box">
			<view class="title" v-if="integralDetails.integral == 0">现有 <text>{{integralDetails.integral}}</text> 积分，不能进行兑换</view>
			<view class="title" v-else-if="integralDetails.points_back < 0">现有 <text>{{integralDetails.integral}}</text> 积分，积分不足不能进行兑换</view>
			<view class="title" v-else>现有 <text>{{integralDetails.integral}}</text> 积分，兑换后剩余 {{integralDetails.points_back}} 积分</view>
			<view class="title_l">兑换记录</view>
			<view class="list flex-r-b-c" v-for="(item,index) in integralList" :key="index">
				<view class="list_l">
					<view class="name">{{item.title}}</view>
					<view class="time">{{item.create_time}}</view>
				</view>
				<view class="integralPlus"><text>{{item.integral}}</text> 积分</view>
			</view>
		</view>
		<view class="text" style="width: 100%; text-align: center; font-size: 32rpx; font-weight: bold; margin-top: 40rpx;">{{titleText}}</view> -->
		<!-- 确认兑换 -->
		<!-- <view class="btn" @tap.stop="exchangeBtn">确认兑换</view> -->
		<view style="background-color:#FFFFFF;" class="nextStep">
			<view class="nextStepBtn" @tap.stop="exchangeBtn">确认兑换</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				page: 1, // 页码
				pageData: {}, // 页面数据
				tabCurrent: 0, // tab 下标
				integralDetails: {}, // 获取积分兑换详情
				integralList: [], // 积分兑换列表
				titleText: '' ,// 上拉提示
				addressId: '' , // 邮寄到家的默认地址id
			};
		},
		onLoad(options) {
			this.pageData = options
			this.getIntegralConfirm() // 获取积分确认订单
		},
		onReachBottom() {
			let that = this
			if(that.titleText == ''){ // 防止上拉多次请求
				that.page = that.page+1
				that.getIntegralConfirm()
			}
		},
		methods: {
			// 获取积分确认订单
			getIntegralConfirm(){
				let that = this
				that.$api.exchange_details({id: that.pageData.id, page: that.page}).then(res => {
					console.log(res)
					that.integralDetails = res.data.data
					that.addressId = res.data.data.sendbypost.id
					that.titleText = res.data.data.integral_list.data.length == 0 ? '暂无数据' : ''
					that.integralList = that.integralList.concat(res.data.data.integral_list.data)
				})
			},
			// 跳转选择地址
			goAddressList(){
				uni.navigateTo({
					url: '/order/addressList/addressList'
				})
			},
			// 查询替换地址
			replaceAddress(id){
				let that = this
				that.addressId = id
				that.$api.address_details({type: 1, id: id}).then(res => {
					that.integralDetails.sendbypost = res.data.data
				})
			},
			// 点击兑换
			exchangeBtn(){
				let that = this
				let address_type = that.tabCurrent == 0 ? 1 : 2
				if(address_type == 2 && that.addressId == ''){
					uni.showToast({
						title: '请选择邮寄到家的地址',
						icon: 'none'
					})
					return
				}
				if(that.integralDetails.points_back < 0){
					uni.showToast({
						title: '当前积分不够，不能进行兑换',
						icon: 'none'
					})
					return
				}
				let data = {
					pid: that.pageData.id,
					address_type: address_type,
					integral: that.integralDetails.points,
					id: that.addressId
				}
				that.$api.confirm_exchange(data).then(res => {
					console.log(res)
					uni.showToast({
						title: '兑换成功',
						icon: 'none'
					})
					setTimeout(() => {
						uni.navigateBack()
					} , 1000)
				})
			}
		}
	}
</script>

<style lang="less">
	.integralConfirm {
		width: 90vw;
		height: auto;
		box-sizing: border-box;
		padding-bottom: 100rpx;
		margin: 40rpx auto;

		.tab_box {
			width: 100%;
			height: 90rpx;
			align-items: flex-end !important;
			position: relative;

			.tab_item {
				width: 50%;
			}

			.active {
				height: 70rpx;
				background: #EAEAEA;
				border-radius: 0rpx 28rpx 0px 28rpx;
				z-index: 99;

				text {
					color: #4B4B4B;
					font-size: 28rpx;
				}
			}

			.active3 {
				height: 70rpx;
				background: #EAEAEA;
				border-radius: 28rpx 0rpx 28rpx 0rpx;
				z-index: 99;

				text {
					color: #4B4B4B;
					font-size: 28rpx;
				}
			}

			.active2 {
				height: 90rpx;
				background: #FFFFFF;
				border-radius: 28rpx 28rpx 0rpx 28rpx;
				z-index: 99;

				text {
					font-size: 36rpx;
					color: #0F4C3A;
					font-weight: bold;
				}
			}

			.active1 {
				height: 90rpx;
				background: #FFFFFF;
				border-radius: 28rpx 28rpx 28rpx 0rpx;
				z-index: 99;

				text {
					font-size: 36rpx;
					color: #0F4C3A;
					font-weight: bold;
				}
			}
		}

		//
		.address_box {
			width: 100%;
			height: auto;
			box-sizing: border-box;
			padding: 40rpx;
			background-color: #FFFFFF;
			border-bottom-left-radius: 28rpx;
			border-bottom-right-radius: 28rpx;
			.address{
				font-size: 32rpx;
				font-weight: bold;
				color: #4B4B4B;
			}
			.address_b{
				margin-top: 20rpx;
				font-size: 28rpx;
				font-weight: 500;
				color: #4B4B4B;
				.tel{
					margin-left: 20rpx;
					color: #9B9B9B;
				}
			}
		}
		//
		.productInfo{
			width: 100%;
			height: auto;
			box-sizing: border-box;
			padding: 30rpx;
			background-color: #FFFFFF;
			margin: 40rpx auto;
			border-radius: 28rpx;
			.list{
				margin-top: 20rpx;
				image{
					width: 200rpx;
					height: 200rpx;
					border-radius: 20rpx;
				}
				.list_f{
					width: 50%;
					.name{
						color: #666666;
						font-size: 32rpx;
						font-weight: bold;
					}
					.integral{
						color: #FF6C1D;
						font-size: 42rpx;
						font-weight: 500;
						margin-top: 50rpx;
						text{
							display: inline-block;
							font-size: 24rpx;
							margin-left: 10rpx;
						}
					}
				}
			}
		}
		//
		.integral_box{
			width: 100%;
			height: auto;
			border-radius: 28rpx;
			background-color: #FFFFFF;
			box-sizing: border-box;
			padding: 30rpx;
			.title{
				width: 100%;
				text-align: center;
				text{
					display: inline-block;
					color: #FF6C1D;
				}
			}
			//
			.title_l{
				height: 30rpx;
				color: #5A5A5A;
				font-size: 28rpx;
				font-weight: bold;
				box-sizing: border-box;
				padding-left: 30rpx;
				margin: 30rpx 0rpx;
				position: relative;
				&::after{
					content: '';
					width: 10rpx;
					height: 30rpx;
					background-color: #45806E;
					position: absolute;
					left: 0;
					top: 65%;
					transform: translateY(-50%);
				}
			}
			//
			.list{
				width: 100%;
				height: auto;
				border-bottom: 1px solid #F2F2F2;
				margin-top: 40rpx;
				padding-bottom: 30rpx;
				.list_l{
					.name{
						color: #5A5A5A;
						font-size: 28rpx;
						font-weight: 500;
					}
					.time{
						margin-top: 10rpx;
						color: #939393;
						font-size: 20rpx;
						font-weight: 500;
					}
				}
				.integralPlus{
					color: #FF6C1D;
					font-size: 32rpx;
					text{
						display: inline-block;
						font-size: 36rpx;
						margin: 0rpx 10rpx;
					}
				}
			}
			
		}
		
		.btn{
			width: 40%;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			background-color: #45806E;
			border-radius: 40rpx;
			font-size: 32rpx;
			font-weight: 500;
			color: #FFFFFF;
			margin: 60rpx auto;
			position: fixed;
			bottom: 80rpx;
			left: 50%;
			transform: translateX(-50%);
		}
	}
</style>
